Modern Web Technologies Demo

Exploring Shadow DOM, Canvas, Base64 Images, Animations, and Lazy Loading

Try Our Multipage Form → Try Form with URL Routing →

Shadow DOM - Encapsulated Web Components

Shadow DOM provides encapsulation for DOM and CSS, allowing you to create isolated components with their own styling that doesn't leak out or get affected by external styles.

Shadow DOM Component Example

Canvas Element - Dynamic Graphics Rendering

HTML5 Canvas provides a powerful way to draw graphics, animations, and interactive content using JavaScript. It's perfect for games, data visualizations, and custom graphics.

Interactive Canvas Drawing

CSS Animations - Dynamic Visual Effects

CSS animations bring life to web pages with smooth transitions, keyframe animations, and interactive effects. They enhance user experience and provide visual feedback.

Animation Examples

Bounce Animation

Rotate Animation

Pulse Animation

Slide Animation

Lazy Loading - Performance Optimization

Lazy loading delays the loading of non-critical resources until they're needed, improving page load times and reducing bandwidth usage. This is especially important for images and other media content.

Lazy Loading Images

Images will load 5 seconds after page load:

Lazy loaded image 1
Loading...
Lazy loaded image 2
Loading...
Lazy loaded image 3
Loading...
Lazy loaded image 4
Loading...
Lazy loaded image 5
Loading...

Iframe - Embedded Content

Iframes allow you to embed external content directly into your web page, such as videos, maps, documents, or other websites. They provide a secure way to include third-party content while maintaining isolation.

Embedded Website Example

Below is an example of embedding external content using an iframe:

Note: Some websites may restrict iframe embedding for security reasons. This is controlled by the X-Frame-Options header or Content Security Policy.